<template>
  <div id="mystatus">
  	<img class="mystatusbg" src="../assets/registerbg.png">
  	<text-header :title="'我的状态'" :bgcolor="'rgba(255,255,255,0)'" :color="'#fff'" :topath="'/index'" class="textHeader"></text-header>
  	<div class="myinfo">
  		<span class="infoicon"><img src="http://static.ydcss.com/uploads/lightbox/meizu_s2.jpg"></span>
  		<span class="infoname">我的名字</span>
  		<div class="bodyheight">
  			<span class="bodyheighttext">身高</span>
  			<span class="bodyheightvalue">176</span>
  		</div>
  		<div class="bodyweight">
  			<span class="bodyweighttext">体重</span>
  			<span class="bodyweightvalue">80KG</span>
  		</div>
  	</div>
  	<div class="sports-model">
  		<div class="sports-wrap">
  			<div class="sportstext">运动记步</div>
  			<div class="todaystep">
  				<div class="todaysteptext">今日步数</div>
  				<div class="todaystepnum">455555</div>
  			</div>
  			<div class="consumecalorie">
  				<div class="calorietext">消耗卡路里</div>
  				<div class="calorienum">3963</div>
  			</div>
  		</div>
  	</div>
  	<div class="schedule-model">
  		<div class="schedule-wrap">
  			<div class="scheduletop">
  				<span class="scheduletop"></span>
  				<span class="scheduletext">今日完成进度</span>
  				<span class="schedulenum">3/5</span>
  			</div>
  		</div>
  	</div>
  </div>
</template>

<script>
import textHeader from "../components/TextHeader";
export default {
  name: 'mystatus',
  components: {
  	textHeader
  }
}
</script>
<style lang="scss">
@import "../style/public.scss";
#mystatus{
	height:100%;
	background:#f1f1f1;
	.mystatusbg{
      	width:100%;
      	height:rem(620);
      	position:absolute;
      	top:0;
      	left:0;
	}
	.myinfo{
		display:flex;
		z-index:6;
		padding:rem(40) rem(40) 0;
		.infoicon{
			z-index:6;
			font-size:0;
			margin-right:rem(20);
			img{
				width:rem(108);
				height:rem(108);
				border-radius:rem(8);
			}
		}
		.infoname{
			z-index:6;
			align-items:flex-start;
			flex:1;
			font-size:rem(42);
			text-align:left;
			color:#fff;
		}
		.bodyheight{
			z-index:6;
			display:flex;
			flex-direction:column;
			color:#fff;
			margin-right:rem(40);
			padding-top:rem(12);
			.bodyheighttext{
				font-size:rem(24);
				margin-bottom:rem(16);
			}
			.bodyheightvalue{
				font-size:rem(32);
			}
		}
		.bodyweight{
			z-index:6;
			display:flex;
			padding-top:rem(12);
			flex-direction:column;
			color:#fff;
			.bodyweighttext{
				text-align:right;
				font-size:rem(24);
				margin-bottom:rem(16);
			}
			.bodyweightvalue{
				text-align:right;
				font-size:rem(32);
			}
		}
	}
	.sports-model{
		display:flex;
		padding:0 rem(40);
		margin-top:rem(30);
		.sports-wrap{
			height:rem(120);
			flex:1;
			display:flex;
			z-index:6;
			border-radius:rem(10);
			background: linear-gradient(to right, #9eed4b , #d9f36e);
			align-items: center;
			.sportstext{
				flex:1;
				font-size:rem(38);
				color:#339f38;
			}
			.todaystep{
				flex:1;
				color:#339f38;	
				.todaysteptext{
					font-size:rem(12);
				}
				.todaystepnum{
					font-size:rem(40);
				}
			}
			.consumecalorie{
				flex:1;
				color:#339f38;
				.calorietext{
					font-size:rem(12);
				}
				.calorienum{
					font-size:rem(40);
				}
			}
		}
	}
	.schedule-model{
		display:flex;
		padding:0 rem(40);
		.schedule-wrap{
			flex:1;
		}
	}

}
</style>
